import React, { useEffect, useState } from "react";
import style from "./style.less";
export default () => {
  const [data, setData] = useState([
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
    { name: "小哥哥", value: Math.round(Math.random() * 20000) },
  ]);

  useEffect(() => {
    let timer = setInterval(() => {
      let list = [];
      let color = `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`;
      for (let i = 0; i < 12; i++) {
        let temp = { name: "小哥哥", value: Math.round(Math.random() * 20000), color };
        list.push(temp);
      }
      console.log("list", list);
      setData(list);
    }, 6000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div style={{ height: 500, width: 300, display: "flex", overflow: "hidden", border: "1px solid blue" }}>
      <ul
        className={style.wrap}
      >
        {data.map((e, index) => (
          <li
            className={style.item}
            key={index}
            style={{ color: e.color || "red" }}
          >
            <p className={style.left}>{e.name}</p>
            <p className={style.right}>{e.value}</p>
          </li>))}
      </ul>
    </div>
  );
};
